<template>
  <div class="page-card verify-data" v-if="load">
    <h-query :showKey="[]" :query="query" @search="search" v-if="!hidden">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0;margin-top: 50px" @click="showJj = true;nowDate = moment().format('YYYY-MM-DD HH:mm:ss')">交接班注意事项</a-button> -->
      <a-button class="verify-btn a-button-right" style="margin: 6px 0 0 0;" type="primary" @click="toHistory">历史记录</a-button>
    </h-query>
    <h-ccard shadow>
      <a-row :gutter="20">
        <a-col :span="4" v-if="!hidden">
          <div class="verify-list">
            <h1 class="verify-label">事件名称: </h1>
            <!-- <a-button class="exports" style="position: absolute;right: 20px;top:0" @click="writeEventInfo">导出</a-button> -->
            <div class="verify-list--scroll">
              <template v-if="id === '6838747468921123458'">
                <div @click="select(item, i)" :class="['verify-each', active.includes(item.id) ? 'active' : '']" v-for="(item, i) in history" :key="i">
                  <div class="verify-order" v-if="active.includes(item.id)">{{ active.findIndex(e => e == item.id) + 1 }}</div>
                  <p>风险点：{{ item.riskPoint }}</p>
                  <p>事项：{{ item.matters }}</p>
                  <p>上报账号部门：{{ item.departName }}</p>
                  <!-- <p class="ellipsis">{{ i + 1 }}. {{ item.title | htmlFilter }}</p> -->
                </div>
              </template>
              <template v-else>
                <div @click="select(item, i)" :class="['verify-each', active.includes(item.id) ? 'active' : '']" v-for="(item, i) in history" :key="i">
                  <div class="verify-order" v-if="active.includes(item.id)">{{ active.findIndex(e => e == item.id) + 1 }}</div>
                  <p>{{ item.eventCode }}</p>
                  <p class="ellipsis">{{ item.title | htmlFilter }}</p>
                </div>
              </template>
            </div>
          </div>
          <!-- <div class="verify-list">
            <h1 class="verify-label">下属部门上报: </h1>
            <div class="verify-list--scroll">
              <div :class="['verify-each']" v-for="(item, i) in historyDetp" :key="i">
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div> -->
        </a-col>
        <a-col :span="!hidden ? 20 : 24">
          <div style="position: relative">
            <h1 class="verify-label">{{ $route.meta.title }}</h1>
          </div>
          <template v-if="!hidden">
            <a-collapse v-model="activeKey">
              <a-collapse-panel key="1" header="今日已保存记录">
                <h-table
                  ref="htableHis"
                  @init="getHistory"
                  :config="configHis">
                  <span slot="order" slot-scope="{index}">
                    {{ index + 1 }}
                  </span>
                  <!-- <div slot="dutyStatus2" slot-scope="{text}">
                    {{ text == 1 ? '未上报' : '已上报' }}
                  </div> -->
                  <a-select slot="dutyStatus2" v-model="record.dutyStatus" slot-scope="{text, record}" @change="changeDutyStatus($event, record.clueEventId)">
                    <a-select-option :value="1">未采纳</a-select-option>
                    <a-select-option :value="0">已采纳</a-select-option>
                  </a-select>
                  <div slot="address" slot-scope="{text}">
                    {{ text.toString() }}
                  </div>
                  <div slot="onlineResponse2" slot-scope="{text}">
                    <!-- <span :title="text | htmlFilter">{{ (text && (text.substring(0, 20) + '...')) | htmlFilter }}</span> -->
                    <div style="text-align: left;">
                      <a-tooltip>
                        <div slot="title">
                          {{ text | htmlFilter }}
                        </div>
                        <div v-html="formatLink(text)"></div>
                      </a-tooltip>
                    </div>
                  </div>

                  <div slot="img2" slot-scope="{text, record}" style="display:flex">
                    <viewer :images="[record.img]" v-if="text" >
                      <img :src="text" width="90px" height="90px" style="object-fit: cover" alt="">
                    </viewer>
                    <div v-else>
                      无图片
                    </div>
                    {{record.link}}
                  </div>
                  <!-- <div slot="img" slot-scope="{text}">
                    <a v-if="text" :href="text" target="_blank">{{ text }}</a>
                  </div> -->
                  <span slot="action" slot-scope="{text, record}">
                    <a @click="edit(record)">编 辑</a>
                    <a-divider type="vertical"></a-divider>
                    <a class="red" @click="remove2(record)">删 除</a>

                  </span>

                </h-table>
              </a-collapse-panel>
            </a-collapse>
            <br>
          </template>
          <p style="text-align: right">
            <a-button type="primary" @click="jl">+记录</a-button>
          </p>
          <h-table
            ref="htable"
            @init="getList"
            :config="config">
            <span slot="order" slot-scope="{index}">
              {{ index + 1 }}
            </span>
            <!-- <span slot="link" slot-scope="{text, record}">
              <div>{{ record.title }}</div>
              <a :href="record.link" target="_blank">{{ record.link }}</a>
            </span> -->
            <!-- <template > -->
            <template v-for="(item, i) in config.columns.filter(e => e.dataIndex != 'action' && e.dataIndex != 'order')" :slot="item.dataIndex" slot-scope="{record}">
              <a-select
                style="width: 100%"
                placeholder="请选择"
                v-if="item.title == '单位评分'"
                :key="item.dataIndex + 1"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)">
                <a-select-option value="1">1</a-select-option>
                <a-select-option value="2">2</a-select-option>
                <a-select-option value="3">3</a-select-option>
                <a-select-option value="4">4</a-select-option>
                <a-select-option value="5">5</a-select-option>
                <a-select-option value="6">6</a-select-option>
                <a-select-option value="7">7</a-select-option>
                <a-select-option value="8">8</a-select-option>
                <a-select-option value="9">9</a-select-option>
                <a-select-option value="10">10</a-select-option>
              </a-select>
              <!-- riskPoint -->
              <a-select
                style="width: 100%"
                v-else-if="item.title == '报送单位'"
                :key="item.dataIndex + 'd' + 1"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option value="宁波市网信办">宁波市网信办</a-select-option>
                <a-select-option :value="item.depart" v-for="(el) in deptArr" :key="el.id">{{ el.depart }}</a-select-option>
              </a-select>
              <a-select
                style="width: 100%"
                v-else-if="item.dataIndex == 'category'"
                :key="item.dataIndex + 't' + 1"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option :value="el" v-for="(el) in typeList" :key="el">{{ el }}</a-select-option>
              </a-select>
              <a-select
                style="width: 100%"
                v-else-if="item.dataIndex == 'riskPoint'"
                :key="item.dataIndex + 'r' + 1"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option :value="el" v-for="(el) in dangerList" :key="el">{{ el }}</a-select-option>
              </a-select>
              <a-select
                v-else-if="item.title == '属地'"
                :key="item.dataIndex + 's' + 1"
                style="width: 100%"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option v-for="el in address" :value="el.title" :key="el.title">{{ el.title }}</a-select-option>
              </a-select>
              <a-select
                v-else-if="item.title == '区域'"
                :key="item.dataIndex + 's' + 1"
                mode="multiple"
                style="width: 100%"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option v-for="el in address" :value="el.title" :key="el.title">{{ el.title }}</a-select-option>
              </a-select>
              <div v-else-if="item.dataIndex == 'dealWithSituation' && id == '5831651651651248516'" :key="item.dataIndex + 's' + 1">
                <!-- <a-input placeholder="图片" :key="item.dataIndex + id" v-model="record['img']" @blur="blur($event, record, 'img')"></a-input> -->
                <a-textarea :rows="3" :key="item.dataIndex" v-model="record[item.dataIndex]"  @blur="blur($event, record, item.dataIndex)"></a-textarea>
              </div>
              <div v-else-if="item.dataIndex == 'source' && id == '5831651651651248516'" :key="item.dataIndex + 's' + 1">
                <a-textarea :rows="3" :key="item.dataIndex" v-model="record[item.dataIndex]" @blur="blur($event, record, item.dataIndex)"></a-textarea>
              </div>
              <div v-else-if="item.dataIndex == 'img' && id == '5831651651651248516'" :key="item.dataIndex + 's' + 1" style="display:flex">
                <UploadImageMutil
                  ref="image"
                  text="上传图片"
                  :length="1"
                  :url="record['img']"
                  @getUrl="(url,fileList) => getimg(record, item.dataIndex, url)"
                  style="margin-right: 12px" />
                  <a-textarea :rows="3" :key="item.dataIndex" v-model="record['link']" @blur="blur($event, record, 'link')"></a-textarea>
              </div>
              <a-textarea v-else :rows="3" :key="item.dataIndex" v-model="record[item.dataIndex]" @blur="blur($event, record, item.dataIndex)"></a-textarea>
            </template>
            <!-- </template> -->

            <!-- <span slot="onlineResponse">
              <a-input v-for="item in config.columns" :key="item.dataIndex" placeholder="请输入"></a-input>
            </span> -->

            <a-select slot="dutyStatus" v-model="record.dutyStatus" slot-scope="{text, record}" >
              <a-select-option :value="1">未采纳</a-select-option>
              <a-select-option :value="0">已采纳</a-select-option>
            </a-select>

            <span slot="action" slot-scope="{text, record}">
              <a class="red" @click="remove(record)">删 除</a>
            </span>
          </h-table>
          <div class="verify-footer" v-if="!hidden">
            <a-button type="primary" @click="save">保 存</a-button>
            <a-button type="primary" style="margin-left: 12px" @click="showNowData = true">导出</a-button>
          </div>
        </a-col>
      </a-row>
    </h-ccard>

    <a-modal v-model="showJj" :title="`交接班注意事项（${nowDate}）`" hideCan :closable="false" :maskClosable="false">
      <a-textarea v-model="note" :rows="5"></a-textarea>

      <template slot="footer">
        <a-button type="primary" @click="showJj=false">确定</a-button>
      </template>
    </a-modal>

    <a-modal v-model="showEdit" @ok="submitEdit" width="900px">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
        <a-row :gutter="20">
          <a-col :span="12" v-for="(item, i) in Object.keys(form).filter(e => config.columns.map(m => m.dataIndex).includes(e))" :key="i">
            <a-form-model-item :label="config.columns.find(e => e.dataIndex == item) && config.columns.find(e => e.dataIndex == item).title" prop="interval">
              <a-select
                style="width: 100%"
                placeholder="请选择"
                v-if="item == 'score'"
                :key="item + 1"
                v-model="form[item]">
                <a-select-option value="1">1</a-select-option>
                <a-select-option value="2">2</a-select-option>
                <a-select-option value="3">3</a-select-option>
                <a-select-option value="4">4</a-select-option>
                <a-select-option value="5">5</a-select-option>
                <a-select-option value="6">6</a-select-option>
                <a-select-option value="7">7</a-select-option>
                <a-select-option value="8">8</a-select-option>
                <a-select-option value="9">9</a-select-option>
                <a-select-option value="10">10</a-select-option>
              </a-select>
              <a-select
                style="width: 100%"
                v-else-if="item == 'departS'"
                :key="item.dataIndex + 'd' + 1"
                v-model="form[item]"
                placeholder="请选择">
                <a-select-option value="宁波市网信办">宁波市网信办</a-select-option>
                <a-select-option :value="item.depart" v-for="(el) in deptArr" :key="el.id">{{ el.depart }}</a-select-option>
              </a-select>
              <a-select v-else-if="item == 'dutyStatus'" v-model="form[item]">
                <a-select-option :value="1">未采纳</a-select-option>
                <a-select-option :value="0">已采纳</a-select-option>
              </a-select>
              <a-select
                style="width: 100%"
                v-else-if="item == 'riskPoint'"
                :key="item.dataIndex + 'r' + 1"
                v-model="form[item]"
                placeholder="请选择">
                <a-select-option :value="el" v-for="(el) in dangerList" :key="el">{{ el }}</a-select-option>
              </a-select>
              <p v-else-if="item === 'img'" style="line-height: 20px !important;">
                <a :href="form[item]" target="_blank" >{{ form[item] }}</a>
              </p>
              <a-textarea v-else :rows="3" :key="i" v-model="form[item]"></a-textarea>

            </a-form-model-item>

          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <nowDataModal v-model="showNowData" :id="id" @submit="exportSave" />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { everDetail, getAllEvent, getClueEvents, getBeOnDutyEvent, addBeOnDuty, updateDutyStatus, getHistory, address, delHistory, updateBeOnDutyHistory, writeEventInfo } from '@/api/serve';
import { ExportTemplate, ExportTemplate2 } from '@/api/dutyTime';
import { getDepartByIsOut } from '@/api/dept';
import moment from 'moment';
import nowDataModal from './action/nowDataModal';
import { cloneDeep } from 'lodash';
import { AESKey } from '@/utils/utils';
import { removeHTMLTags } from '@/utils/common';
import UploadImageMutil from '@/components/UploadImageMutil';

// import { columns as columnsHis } from './action/columns';
const columns = {
  // 每日值班舆情及处置情况一览表
  '5838747468921223136': [
      {
        align: 'center',
        title: '序号',
        width: 100,
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '日期',
        dataIndex: 'createTime',
        width: 100
      },
      {
        align: 'center',
        title: '舆情文字+链接',
        dataIndex: 'title',
        width: 300,
        scopedSlots: { customRender: 'textLink' }
      },
      {
        align: 'center',
        title: '来源',
        dataIndex: 'source',
        scopedSlots: { customRender: 'source' }

      },
      {
        align: 'center',
        title: '类别',
        dataIndex: 'category',
        scopedSlots: { customRender: 'category' }

      },
      {
        align: 'center',
        title: '属地',
        dataIndex: 'territory',
        scopedSlots: { customRender: 'territory' }

      },
      {
        align: 'center',
        title: '部门',
        dataIndex: 'depart',
        scopedSlots: { customRender: 'depart' }

      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
    // 网上舆情信息表
  '5831651651651248516': [
      {
        align: 'center',
        title: '序号',
        width: 100,
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '类别',
        dataIndex: 'category',
        scopedSlots: { customRender: 'category' },
        width: 170
      },
      {
        align: 'center',
        title: '区域',
        dataIndex: 'address',
        width: 120,
        scopedSlots: { customRender: 'address' }
      },
      {
        align: 'center',
        title: '信息来源',
        dataIndex: 'img',
        width: 220,
        scopedSlots: { customRender: 'img' }
      },
      // {
      //   align: 'center',
      //   title: '单位',
      //   dataIndex: 'depart',
      //   width: 120,
      //   scopedSlots: { customRender: 'depart' }
      // },
      // {
      //   align: 'center',
      //   title: '热点问题',
      //   dataIndex: 'hotInformation',
      //   scopedSlots: { customRender: 'hotInformation' }

      // },
      // {
      //   align: 'center',
      //   title: '舆情风险',
      //   dataIndex: 'publicOpinionRisk',
      //   scopedSlots: { customRender: 'publicOpinionRisk' }

      // },
      // {
      //   align: 'center',
      //   title: '工作建议',
      //   dataIndex: 'workProposal',
      //   scopedSlots: { customRender: 'workProposal' }

      // },
      {
        align: 'center',
        title: '网上反应内容',
        dataIndex: 'onlineResponse',
        scopedSlots: { customRender: 'onlineResponse' },
        width: 170

      },
      // {
      //   align: 'center',
      //   title: '图片',
      //   dataIndex: 'img',
      //   scopedSlots: { customRender: 'img' }

      // },
      {
        align: 'center',
        title: '办理情况',
        dataIndex: 'dealWithSituation',
        scopedSlots: { customRender: 'dealWithSituation' }

      },
      {
        align: 'center',
        title: '反馈结果',
        dataIndex: 'feedbackResults',
        scopedSlots: { customRender: 'feedbackResults' }

      },
      // {
      //   align: 'center',
      //   title: '单位评分',
      //   dataIndex: 'score',
      //   scopedSlots: { customRender: 'score' }

      // },
      {
        align: 'center',
        title: '时间',
        dataIndex: 'recordDate'

      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
  // 浙江省每周地市网络舆情分险点报送表
  '5838744128921248516': [
      {
        align: 'center',
        title: '序号',
        width: 100,
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },

      {
        align: 'center',
        title: '风险点',
        dataIndex: 'riskPoint',
        scopedSlots: { customRender: 'riskPoint' }

      },
      {
        align: 'center',
        title: '事项',
        dataIndex: 'matters',
        scopedSlots: { customRender: 'matters' }

      },
      {
        align: 'center',
        title: '分析研判',
        dataIndex: 'analysisJudge',
        scopedSlots: { customRender: 'analysisJudge' }

      },
      {
        align: 'center',
        title: '报送人',
        dataIndex: 'createBy',
        scopedSlots: { customRender: 'createBy' }

      },
      {
        align: 'center',
        title: '报送单位',
        dataIndex: 'depart',
        key: 'departS',
        scopedSlots: { customRender: 'depart' }

      },
      {
        align: 'center',
        title: '报送时间',
        dataIndex: 'recordDate'

        // scopedSlots: { customRender: 'recordDate' }
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
    // 网民热点关注表
  '5838747468912348516': [
      {
        align: 'center',
        title: '序号',
        width: 100,
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '热点问题',
        dataIndex: 'hotInformation',
        scopedSlots: { customRender: 'hotInformation' }

      },
      {
        align: 'center',
        title: '舆情风险',
        dataIndex: 'publicOpinionRisk',
        scopedSlots: { customRender: 'publicOpinionRisk' }

      },
      {
        align: 'center',
        title: '工作建议',
        dataIndex: 'workProposal',
        scopedSlots: { customRender: 'workProposal' }

      },
      // {
      //   align: 'center',
      //   title: '单位',
      //   dataIndex: 'depart',
      //   scopedSlots: { customRender: 'depart' },
      //
      // },
      {
        align: 'center',
        title: '时间',
        dataIndex: 'recordDate'

        // scopedSlots: { customRender: 'recordDate' }
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
    // 网民晚报
    '5838747468921323136': [
      {
        align: 'center',
        title: '序号',
        width: 100,
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '⽹上反应',
        dataIndex: 'onlineResponse',
        scopedSlots: { customRender: 'onlineResponse' },
        ellipsis: true,
        width: 200

      },
      {
        align: 'center',
        title: '具体内容',
        dataIndex: 'feedbackResults',
        scopedSlots: { customRender: 'feedbackResults' }

      },
      {
        align: 'center',
        title: '办理情况',
        dataIndex: 'dealWithSituation',
        scopedSlots: { customRender: 'dealWithSituation' }

      },
      {
        align: 'center',
        title: '记录日期',
        dataIndex: 'recordDate',

      },
      // {
      //   align: 'center',
      //   title: '文章链接',
      //   dataIndex: 'textLink',
      //   scopedSlots: { customRender: 'textLink' }

      // },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],

    // ⽹络舆情⻛险报送表
    '6838747468921123458': [
      {
        align: 'center',
        title: '序号',
        width: 100,
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '风险点',
        dataIndex: 'riskPoint',
        scopedSlots: { customRender: 'riskPoint' },
        ellipsis: true,
        width: 200

      },
      {
        align: 'center',
        title: '事项',
        dataIndex: 'matters',
        scopedSlots: { customRender: 'matters' }

      },
      {
        align: 'center',
        title: '分析研判',
        dataIndex: 'analysisJudge',
        scopedSlots: { customRender: 'analysisJudge' }

      },
      {
        align: 'center',
        title: '属地',
        dataIndex: 'territory',
        scopedSlots: { customRender: 'territory' }

      },
      {
        align: 'center',
        title: '状态',
        dataIndex: 'dutyStatus',
        scopedSlots: { customRender: 'dutyStatus' }

      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ]

    // // 网民晚报
    // '5838747468921323136': [
    //   {
    //     align: 'center',
    //     title: '序号',
    //     width: 100,
    //     dataIndex: 'order',
    //     scopedSlots: { customRender: 'order' }
    //   },
    //   {
    //     align: 'center',
    //     title: '新闻标题',
    //     dataIndex: 'titles',
    //     scopedSlots: { customRender: 'titles' },
    //     ellipsis: true

    //   },
    //   {
    //     align: 'center',
    //     title: '刊播媒体',
    //     dataIndex: 'media',
    //     scopedSlots: { customRender: 'media' }

    //   },
    //   {
    //     align: 'center',
    //     title: '主要内容',
    //     dataIndex: 'content',
    //     scopedSlots: { customRender: 'content' }

    //   },
    //   {
    //     align: 'center',
    //     title: '操作',
    //     dataIndex: 'action',
    //     scopedSlots: { customRender: 'action' }
    //   }
    // ]
};

export default {
  inject: ['toURL', 'setTitle'],
  components: {
    nowDataModal,
    UploadImageMutil
  },
  props: {
    hidden: Boolean
  },
  computed: {
    formatLink() {
      return function(e) {
        if (!e) return '';
        e = removeHTMLTags(e);
        const m = e.match('(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]');
        if (m) {
          e = encodeURIComponent(e).replace(new RegExp(encodeURIComponent(m[0]), 'g'), ``);
          e = decodeURIComponent(e).substring(0, 50) + (decodeURIComponent(e).length > 50 ? '...' : '');
          e = e + `<br><a target="_blank" href="${m[0]}">${m[0]}</a>`;
        } else {
          e = e.substring(0, 50) + ((e).length > 50 ? '...' : '');
        }
        return (e);
      };
    }
  },
  data() {
    return {
      moment,
      showEdit: false,
      load: true,
      activeKey: '1',
      nowDate: moment().format('YYYY-MM-DD'),
      dataShow: false,
      showJj: false,
      showNowData: false,
      dataForm: {
        front: '80',
        back: '10'
      },
      dealWithSituationdefaultValue: '已转属地关注,\n已转相关部⻔处置,\n已转属地和相关单位关注',
      active: [],
      form: {},
      note: '',
      selectData: {},
      query: [
        {
          key: 'title',
          type: 'input',
          label: '搜索事件'
        },
        {
          key: ['startTime', 'endTime'],
          type: 'dateTime',
          label: '时间'
        }

      ],
      history: [
        // {
        //   title: 'XXX事件名称',
        //   time: '2022-02-02 20:00',
        //   statusText: '已完成'
        // }
      ],
      historyDetp: [

      ],
      config: {
        rowKey: 'uuid',
        // bordered: true,
        size: 'small',
        dataSource: [],
        columns: [],
        pagination: false,
        scroll: {
          y: 400,
          x: 800
        }
      },
      configHis: {
        rowKey: 'uuid',
        size: 'small',
        // bordered: true,
        dataSource: [],
        columns: [],
        pagination: false,
        scroll: {
          y: 400,
          x: 800
        }
      },
      id: '',
      time: '',
      api: {
        '5831651651651248516': '/web/reportDuty/query_publicOpinionInformation',
        '5838744128921248516': '/web/reportDuty/query_opinionEveryWeek',
        '5838747468912348516': '/web/reportDuty/query_topicsOfInternetUsers',
        '5838747468921223136': '/web/reportDuty/query_dailyDutyRecord'
        // '6838747468921123458': '/admin/order/getClueEvent'
        // '5838747468921323136': '/web/reportDuty/query_dailyDutyRecord'
      },
      historys: [],
      historyIds: [],
      deptArr: [],
      address: [],
      rules: {},
      dangerList: [
        '涉网络意识形态负面信息',
        '涉苗头性、倾向性、行动性有害信言',
        '近期出台重大政策',
        '近期举办重大活动/工作',
        '近期实施重大工程',
        '近期审理重大案件',
        '近期活跃重点群体',
        '其他'
      ],
      typeList: [
        '意识形态_思想思潮',
        '意识形态_国外境外',
        '意识形态_民族宗教',
        '意识形态_涉外事务',
        '意识形态_其他',
        '政府事务_工作作风',
        '政府事务_组织人事',
        '政府事务_干部队伍',
        '政府事务_重要决策',
        '政府事务_其他',
        '经济领域_宏观经济',
        '经济领域_营商环境',
        '经济领域_行业监管',
        '经济领域_其他',
        '社会民生_城市管理',
        '社会民生_共同富裕',
        '社会民生_利益群体',
        '社会民生_道德风尚',
        '社会民生_环境保护',
        '社会民生_其他',
        '公共安全_突发事故',
        '公共安全_社会治安',
        '公共安全_自然灾害',
        '公共安全_网络安全',
        '公共安全_其他',
        '教育教改_教育政策',
        '教育教改_校园管理',
        '教育教改_师生言行',
        '教育教改_校园安全',
        '教育教改_其他',
        '文体卫生_疫情防控',
        '文体卫生_医院管理',
        '文体卫生_文化旅游',
        '文体卫生_体育赛事',
        '文体卫生_其他',
        '其他领域'

      ]
    };
  },
  created() {
    this.setTitle();
    this.$route.meta.title = this.$route.query.title;
    this.id = this.$route.query.id;
    this.$set(this.config, 'columns', columns[this.id]);
    console.log('[this.config]', this.config);
    this.$nextTick(() => {
      this.$set(this.configHis, 'columns', JSON.parse(JSON.stringify(columns[this.id])).map(e => {
        if (e.dataIndex != 'action' && e.dataIndex != 'order') delete e.scopedSlots;
        if (e.dataIndex == 'onlineResponse') {
          e.scopedSlots = {
            customRender: 'onlineResponse2'
          };
        }
        if (e.dataIndex == 'dutyStatus') {
          e.scopedSlots = {
            customRender: 'dutyStatus2'
          };
        }
        if (e.dataIndex == 'img') {
          e.scopedSlots = {
            customRender: 'img2'
          };
        }
        return {
          ...e
        };
      }));
    });

    this.getAllEvent();
    this.getHistory();
    this.getDepartByIsOut();
    this.getAddress();

    // this.getList();
  },
  methods: {
    writeEventInfo() {
      writeEventInfo().then(res => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const filename = `事件数据.xlsx`;

        if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
              navigator.msSaveBlob(blob, filename);
        } else {
          // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
          const elink = document.createElement('a');
          elink.download = filename;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        }
      });
    },
    getDepartByIsOut() {
      getDepartByIsOut({
        isOut: 0
        // eventId: this.id,
        // ...this.params
      }).then(res => {
        // this.config.dataSource = res.data;
        this.deptArr = res.data;
      });
    },

    search(params) {
      console.log(params);
      this.time = params.time;
      this.getAllEvent(params);
    },
    select(item, i) {
      console.log('[select]', item);
      if (this.historyIds.includes(item.id)) return;
      const id = this.active.findIndex(e => e == item.id);
      if (id > -1) {
        this.active.splice(id, 1);
      } else {
        this.active.push(item.id);
      }

      if (this.active.length - this.historyIds.length > 0) {
        this.getBeOnDutyEvent(item.title, item);
      } else {
        this.config.dataSource = [];
      }

      this.selectData = item;
    },
    getList() {
      if (!this.api[this.id]) return;
      everDetail(this.api[this.id], {
        time: this.time
      }).then(res => {
        if (this.$route.path == '/semList/index1' && this.$ss.get('dataHistory')) {
          this.config.dataSource = this.$ss.get('dataHistory');
        } else {
          this.config.dataSource = res.data || [];
        }
        // this.$ss.set('dataHistory', this.config.dataSource);
      });
    },
    remove(record, type) {
      console.log(record, this.active);
      this.$message.success('删除成功');
      const id = this.active.findIndex(e => e == record.id);
      if (id > -1) {
        this.active.splice(id, 1);
      }
      const index = this.config.dataSource.findIndex(e => e.id == record.id);
      this.config.dataSource.splice(index, 1);

      // if (type == 2) {
      //   const index = this.configHis.dataSource.findIndex(e => e.id == record.id);
      //   this.configHis.dataSource.splice(index, 1);
      // } else {
      //   if (this.active.length) {
      //     this.getBeOnDutyEvent();
      //   } else {
      //     this.config.dataSource = [];
      //   }
      // }
      // this.$refs.htable.refresh(true);
    },
    getAllEvent(params) {
      let obj = {
        dutyId: this.id
      };
      if (params) {
        const { startTime: start, endTime: end, title } = params;
        obj = {
          ...params,
          dutyId: this.id,
          start,
          end,
          title
        };
      }
      if (this.id === '6838747468921123458') {
        getClueEvents(obj).then(res => {
          this.history = res.data.map(e => {
            return {
              ...e,
              title: e.title,
              uuid: AESKey()
            };
          });
        });
      } else {
        getAllEvent(obj).then(res => {
          this.history = res.data.map(e => {
            return {
              ...e,
              title: e.title,
              uuid: AESKey()
            };
          });
        });
      }
    },
    getBeOnDutyEvent(title, item) {
      if (this.id === '6838747468921123458') {
        // const ids = this.config.dataSource.map(e => e.id);
        this.config.dataSource.push(cloneDeep(item));
        this.config.dataSource = this.config.dataSource.filter(e => {
          return this.active.includes(e.id);
        });
      } else {
        getBeOnDutyEvent({
          uid: this.active.filter(e => !this.historyIds.includes(e)),
          dutyId: this.id
        }).then(res => {
          const isShowOnlineTitle = ['5838747468921323136', '5831651651651248516'].includes(this.id);
          const isTextLink = ['5838747468921223136', '5838747468921323136'].includes(this.id);
          let textLink = '';

          console.log('[isTextLink]', isTextLink);
          const data = res.data ? res.data.map((e, i) => {
            if (this.id === '5838747468921223136') {
              textLink = e.title + ' ' + e.link;
            } else if (this.id === '5838747468921323136') {
              textLink = e.link;
            }
            return {
              ...e,
              sortNo: i + 1,
              textLink,
              date: moment().format('YYYY-MM-DD HH:mm:ss'),
              recordDate: moment().format('YYYY-MM-DD HH:mm:ss'),
              score: '',
              dealWithSituation: this.dealWithSituationdefaultValue,
              depart: this.id == '5838744128921248516' ? '宁波市网信办' : undefined,
              onlineResponse: isShowOnlineTitle ? title : '',
              titles: e.title,
              uuid: AESKey()
              // source: (e.eventCode || '') + '-' + e.title
            };
          }) : [];
          const ids = this.config.dataSource.map(e => e.id);
          // if (this.$ss.get('dataHistory')) {
          //   this.config.dataSource = this.$ss.get('dataHistory');
          // }
          this.config.dataSource = this.config.dataSource.concat(data.filter(e => !ids.includes(e.id))).filter(e => {
            return this.active.includes(e.id);
          });
          this.$ss.set('dataHistory', this.config.dataSource);
        });
      }
    },
    blur(e, { id }, key) {
      console.log(e);
      console.log(e.target.value, key);
      const data = this.config.dataSource.find(e => e.id == id);
      if (data) {
        data[key] = e.target.value;
      }
      console.log(this.config.dataSource);
    },
    getimg({ id }, key, url, i) {
      const data = this.config.dataSource.find(e => e.id == id);
      if (data) {
        data[key] = url;
      }
      this.config.dataSource = this.config.dataSource;
    },
    change(e, { id }, key) {
      const data = this.config.dataSource.find(e => e.id == id);
      if (data) {
        data[key] = e;
      }
      console.log(this.config.dataSource);
    },
    save(bool, cb = () => {}) {
      if (!this.config.dataSource.length && !this.configHis.dataSource.length) {
        this.$message.error('请先选择事件');
        return;
      }
      const that = this;
      const data = that.config.dataSource.map(e => {
        return {
          ...e,
          eventId: e.id,
          note: this.note,
          dutyId: this.id,
          clueEventId: e.id
        };
      }).concat(
        that.configHis.dataSource.map(e => {
        return {
          ...e,
          eventId: e.id,
          note: this.note,
          dutyId: this.id,
          clueEventId: e.id

        };
      })
      );
      console.log(data);
      this.$confirm({
        title: '温馨提示',
        content: bool === true ? '确定要保存并导出吗？' : '确定要保存吗？',
        onOk() {
          addBeOnDuty({
            entity: data
          }).then(res => {
            that.load = false;
            that.$nextTick(() => {
              that.load = true;
            });
            cb();
            // that.active = [];
            that.config.dataSource = [];
            if (bool !== true) that.$message.success(res.msg);
            that.active = [];
            that.getAllEvent();
          });
        }
      });
    },
    exportSave(ids) {
      if (!ids.length) {
        this.$message.error('没有数据！');
        return;
      }
      const that = this;
      if (this.id == '5831651651651248516') {
        this.$confirm({
        title: '温馨提示',
        content: '确定要保存并导出吗？',
        onOk() {
          ExportTemplate2({
            dutyId: that.id,
            reportId: ids.join(',')
          }).then(res => {
            that.active = [];
            that.config.dataSource = [];
            // that.$message.success(res.msg);
            const blob = new Blob([res], { type: 'application/msword' });

            const filename = `${that.$route.meta.title}-${moment().format('YYYYMMDDHHmmss')}.docx`;

            if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
                  navigator.msSaveBlob(blob, filename);
            } else {
              // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
              const elink = document.createElement('a');
              elink.download = filename;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }
          });
        }
      });
        return;
      }
      this.$confirm({
        title: '温馨提示',
        content: '确定要保存并导出吗？',
        onOk() {
          ExportTemplate({
            dutyId: that.id,
            reportId: ids.join(',')
          }).then(res => {
            that.active = [];
            that.config.dataSource = [];
            // that.$message.success(res.msg);
            const blob = new Blob([res], { type: 'application/vnd.ms-excel' });

            const filename = `${that.$route.meta.title}-${moment().format('YYYYMMDDHHmmss')}.xls`;

            if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
                  navigator.msSaveBlob(blob, filename);
            } else {
              // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
              const elink = document.createElement('a');
              elink.download = filename;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }
          });
        }
      });
    },
    toHistory() {
      this.$router.push({ path: '/semList/index1', query: this.$route.query });
    },
    getHistory() {
      getHistory({
        dutyId: this.id,
        start: moment().format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      }).then(res => {
        this.configHis.dataSource = res.data.records.map(e => {
          return {
            ...e,
            titles: e.title
          };
        });
        this.configHis.total = res.data.total;
        this.active = res.data.records.map(e => e.eventId);
        this.historyIds = res.data.records.map(e => e.eventId);
      });
    },
    getAddress() {
      address().then(res => {
        this.address = res.data;
      });
    },
    edit(record) {
      this.form = record;
      console.log('[this.form]', this.form);
      this.showEdit = true;
    },
    submitEdit() {
      updateBeOnDutyHistory(this.form).then(res => {
        this.$message.success('修改成功！');
        this.getHistory();
        this.showEdit = false;
      });
      // const index = this.configHis.dataSource.findIndex(e => {
      //   return this.form.id == e.id;
      // });
      // if (index != -1) {
      //   this.configHis.dataSource[index] = this.form;
      // }
      // this.showEdit = false;
    },
    remove2({ id }) {
      const that = this;
      this.$confirm({
        content: '确定要删除吗？',
        onOk() {
          delHistory({
            id,
            isDelete: -1
          }).then(res => {
            that.$message.success('删除成功');
            that.getHistory();
          });
        }
      });
    },
    jl() {
      this.config.dataSource = this.config.dataSource.concat([{
        dutyStatus: 1,
        id: '',
        dealWithSituation: this.dealWithSituationdefaultValue,
        uuid: AESKey()
      }]);

      console.log('[this.config.dataSource]', this.config.dataSource);
    },
    changeDutyStatus(dutyStatus, id) {
      updateDutyStatus({
        id,
        dutyStatus
      }).then(res => {
        this.$message.success('修改成功！');
        this.getHistory();
      });
    }

  }
};
</script>

<style scoped lang="less">
  .UserLayout .content {
    padding: 0;
  }
  .verify-data {
    padding: 50px 30px;
    .verify--btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-list {
      margin-left: -34px;
      margin-bottom: 16px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 12px;
      .verify-list--scroll {
        height: 480px;
        overflow-y: scroll;
        overflow-x: hidden;
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #1F3B8A;
        }
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #EDEDED;
        }
        &::-webkit-scrollbar {
          width: 6px;
          height: 1px;
        }
      }
      &:last-child {
        margin-bottom: 0;
        border: none;
      }

      .verify-label {
        padding-left: 42px;
      }
    }
    .verify-label {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      // padding-left: 42px;
      margin-bottom: 16px;
    }
    .verify-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-each {
      padding: 12px 12px;
      padding-left: 22px;
      box-sizing: border-box;
      // border-radius: 4px;
      position: relative;
      width: 94%;
      margin-left: 6%;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      &:hover {
        background: rgba(31, 59, 138, 0.05);
      }
      &.active {
        background: rgba(31, 59, 138, 0.1);
        &::before {
          content: ' ';
          position: absolute;
          left: 0;
          // border-radius: 10px;
          background: #1F3B8A;
          width: 4px;
          height: 100%;
          top: 0;
        }
      }
      p {
        margin: 0;
      }
      >p:first-child {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 2px;
      }
    }
  }
  .selectall {
    position: absolute;
    right: 12px;
    top: 0;
    z-index: 222;
  }
  .verify-footer {
    text-align: right;
    margin-top: 20px;
  }
  .verify-order {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #1F3B8A;
    line-height: 30px;
    color: #fff;
    text-align: center;
    left: -15px;
    top: 50%;
    margin-top: -15px;
  }
</style>
